<script setup>
import {reactive} from "vue";
// 准备响应式数据，用于保存商品数据
const goods = reactive({});
// 发起数据请求，获取商品数据
fetch("/api/goods").then(res=>res.json()).then(res=>{
  goods.data = res.data.slice(11,21);
})

// 读取本地存储数据，转成对象
const localGoods = JSON.parse(localStorage.getItem("goods")) || [];
// 加入购物车功能
function addCart(id, price){
  // 根据传入的id查询是否存在，存在，获取索引
  let i=0;
  const flag = localGoods.some((val,idx)=>{
    i = idx;
    return val.id === id;
  })
  // 存在
  if(flag){
    // 根据索引，增加数量
    localGoods[i].num++;
  }else{
    // 不存在，新增数据
    localGoods.push({
      id:id,
      num:1,
      check:false,
      price: price
    })
  }
  // 将处理之后的数据，存回本地存储
  localStorage.setItem("goods", JSON.stringify(localGoods));
}
</script>

<template>
  <main class="list">
    <h1>这是商品列表</h1>
    <div class="cont">
      <div class="box" v-for="item in goods.data" :key="item.goodsId" @click=" $router.push({name:'gDetail', params:{id: item.goodsId}}) ">
        <img :src="item.goodsImg" alt="">
        <p>名称：{{ item.goodsName }}</p>
        <p>价格：{{ item.price }}</p>
        <input type="button" value="加入购物车" @click="addCart(item.goodsId, item.price)">
      </div>
    </div>
  </main>
</template>

<style>
.list .cont{
  width:1000px;
  overflow: hidden;
}
.list .cont .box{
  width:200px;
  border: solid 1px black;
  box-sizing: border-box;
  float: left;
  text-align: center;
}
.list .cont .box img{width:90%;}
.list .cont .box p{text-align:left;line-height:20px;height:40px;overflow: hidden;margin: 10px 0;}
</style>
